<template>
	<div	 class="wrap">	
		<logo></logo>
		<div class="top">
			<span>您的当前位置 : 首页 > 全部商品 > 苹果 > 阿克苏</span>
		</div>
		<div class="content" v-for="item in arr">
			<img :src="item.picture" alt="" />
			<div class="c_right">
				<div class="c_right_top">
					<h3>{{item.name}}</h3>
					<button class="btn1">全国</button>
					<button class="btn2">礼拜五</button>
					<button class="btn3">次日达</button>
					<button class="btn4">自营</button>
				</div>
				<div class="c_right_mid">
					<img src="../assets/image/商品详情_03.jpg" alt="" />
					<div class="intro">
						<span>雀斑石榴持续热卖!云南蒙自石榴,原产波斯(今伊朗)一带,公元前二世纪时传入我国,是中国三大石榴之一,粒大皮薄,汁多味甜爽口,雀斑石榴持续热卖!云南蒙自石榴,原产波斯(今伊朗)一带,公元前二世纪时传入我国.是中国三大石榴之一,粒大皮薄,汁多味甜爽口.</span>
					<em></em>
					</div>
				</div>
				<div class="c_right_bottom">
					<span class="price">现价 : ¥ {{item.price}}</span><span class="cost">原价 : ¥ {{item.price+87}}</span>
					<div class="choosenorms">
						请选择规格
						<span>500g</span>
						<span>1000g</span>
						<span>2000g</span>
					</div>
					<div class="choosenorms">
						请选择规格
						<span>500g</span>
						<span>1000g</span>
					</div>
				</div>	
			</div>
			<div class="bottom">
					<span><</span> <img :src="item.picture" alt="" /> <img :src="item.picture" alt="" /> <img :src="item.picture" alt="" /> <img :src="item.picture" alt="" /> <span>></span>
			</div>
			<div class="r-bottom">
				<div class="bottom-r">
					数 量 : <em @click="sub" class="sub">➖</em><i>{{cont}}</i><em @click="add" class="add">➕</em> <button class="jionshopcar" @click="jionshopcar">加入购物车</button> <button class="oncebuy">立即购买</button>
				</div>
				<div class="bottom-r-t">
					<img src="../assets/image/wujiaoxing.png"/>
					<img src="../assets/image/shoucang.png"/>
					收藏此商品  <span>分享到 : </span>
					<img src="../assets/image/small.jpg"/>
				</div>
			</div>
		</div>
		<goodsdetail></goodsdetail>
	</div>
</template>

<script>
	import goodsdetail from "./xiangqing/goodsdetail"
	import logo from "./logo"
	export default{
		name:"xiagqing",
		components:{
			goodsdetail,
			logo
		},
		created(){
			var _this=this;
			this.axios.get('/api/detail',{params:{
					id:_this.$route.params.goodsId
			}}).then(function(data){
					_this.arr.push(data.data[0])
				})
		},
		data:function(){
			return{
				cont:1,
				arr:[]
			}
		},
		methods:{
			add:function(){
				this.cont=this.cont+1;
			},
			sub:function(){
				this.cont= this.cont-1
				if(this.cont<0){
					this.cont=0
				}
			},
			jionshopcar:function(){
				this.axios.get('/api/joinCar',{params:{
					id:this.$route.params.goodsId,
					cont:this.cont
				}}).then(function(data){
					alert("加入购物车成功")
				})
			}
		}
	}
</script>

<style scoped>
	div,span,img,h3{
		margin: 0;
		padding: 0;
	}
	.wrap{
		width: 1280px;
		margin: 0 auto;
	}
	.top{
		width: 1280px;
		height: 40px;
		line-height: 40px;
		margin: 20px auto;
		background-color: rgb(224,224,224);
	}
	.top span{
		color: rgb(130,130,130);
	}
	.content{
		margin-bottom: 50px;
	}
	.content>img{
		width: 500px;
	}
	.c_right{
		vertical-align: top;
		display: inline-block;
		width: 740px;
		margin-left: 34px;
	}
	.c_right_top{
		margin-bottom: 20px;
	}
	.c_right_top>h3{
		margin: 10px 0;
	}
	button{
		color: white;
	}
	.btn1{
		width: 65px;
		background-color: green;
	}
	.btn2{
		width: 80px;
		background-color: rgb(247,131,39);
	}
	.btn3{
		width: 80px;
		background-color: green;
	}
	.btn4{
		width: 65px;
		background-color: green;
	}
	.c_right_mid{
		padding: 20px 0;
		border-top: solid 1px rgb(237,237,237);
		border-bottom: solid 1px rgb(237,237,237);
	}
	.c_right_mid>img{
		width: 120px;
		height: 140px;
	}
	.intro{
		vertical-align: top;
		display: inline-block;
		margin-left: 19px;
	}
	.intro>span{
		display: inline-block;
		width: 590px;
		color: #b3b3b3;
		font-size: 16px;
		vertical-align: middle;
	}
	.intro>em{
		display: inline-block;
		height: 140px;
		vertical-align: middle;
	}
	.price{
		font-size: 30px;
		color: red;
	}
	.cost{
		padding-left: 40px;
		color: #b3b3b3;
		text-decoration: line-through;
	}
	.choosenorms{
		margin: 30px 0;
		color: #b3b3b3;
	}
	.choosenorms>span{
		padding: 5px 10px;
		margin: 0 5px;
		border: 1px solid gray;
		font-size: 13px; 
	}
	.c_right_bottom{
		margin-top: 20px;
	}
	.bottom{
		display: inline-block;
	}
	.bottom span{
		width: 500px;
		line-height: 100px;
		vertical-align: top;
		color: darkgray;
		font-size: 40px;
	}
	.bottom>img{
		width: 100px;
		height: 100px;
	}
	.bottom-r{
		margin-bottom: 20px;
		vertical-align: top;
		margin-left: 85px;
	}
	.bottom-r i{
		padding: 0 20px;
		font-style: normal;
		border: 1px solid lightgray;
	}
	.add,.sub{
		font-style: normal;
		padding: 0 5px;
		background-color: #f2f2f2;
		color: lightgray;
		border: 1px solid lightgray;
		cursor: pointer;
	}
	.jionshopcar{
		margin-left: 30px;
		width: 150px;
		height: 50px;
		background-color: #ffae4f;
		border-radius: 4px;
		font-size: 20px;
	}
	.oncebuy{
		margin-left: 30px;
		width: 150px;
		height: 50px;
		background-color: #f08200;
		border-radius: 4px;
		font-size: 20px;
	}
	.r-bottom{
		display: inline-block;
	}
	.bottom-r-t{
		margin-left: 85px;
		line-height: 17px;
		font-size: 18px;
	}
	.bottom-r-t>img{
		margin-right: 10px;
	}
	.bottom-r-t>span{
		padding-left: 20px;
	}
	.bottom-r-t>img:nth-child(4){
		padding-top: 10px;
		vertical-align: -5px;
	}
</style>